'use strict';
var React = require('react');
var ReactRedux = require('react-redux');
var ReTab = require('./ReTab.jsx');
var HkfsProcessItem = require('../../components/pc/HkfsProcessItem.jsx');
var ReSlider = require('./ReSlider.jsx');
var HkfsLeaderContent = require('../../components/pc/HkfsLeaderContent.jsx');
var HkfsStaffItem = require('../../components/pc/HkfsStaffItem.jsx');
var LazyLoad = require('../../common/LazyLoad.js');
var ReLeftNavigationBar = require('./ReLeftNavigationBar.jsx');
var ReBubbleBox = require('./ReBubbleBox.jsx');
var ReButton = require('../../components/pc/ReButton.jsx');
var ReLiGroup = require('./ReLiGroup.jsx');
var Pager = require('../../components/pc/pager.jsx');
var actions = require('../../actions/about.js');


class HkfsAbout extends React.Component {
    constructor(props) {
        super(props);
        this.renderHkfsProcess = this.renderHkfsProcess.bind(this);
        this.renderEgoItems = this.renderEgoItems.bind(this);
        this.renderTeam = this.renderTeam.bind(this);
        this.getStaff = this.getStaff.bind(this);
        this.renderPosition = this.renderPosition.bind(this);
        this.renderNewsList = this.renderNewsList.bind(this);
        this.getTabActive = this.getTabActive.bind(this);
    }

    getTabActive() {
        //利用window变量识别node和客户端环境，客户端渲染时才执行切换tab页的操作
        if (typeof window !== 'undefined') {
            //客户端渲染完成后修改activeItem,用于定位到特定的tab
            var activeItem = location.href.split('#active')[1];
            if (activeItem) {
                return parseInt(activeItem);
            }
            else {
                return 0;
            }
        }
        else {
            return 0;
        }
    }

    //渲染公司历程
    renderHkfsProcess() {
        return this.props.processItems.map((item, i)=> {
            return <HkfsProcessItem key={"HkfsProcessItem"+i} type={i%2+1}>
                <div className="HkfsProcessItemTime">{item.time}</div>
                <div className="HkfsProcessItemContent">{item.content}</div>
            </HkfsProcessItem>
        });
    }

    //公司荣誉图片轮播
    renderEgoItems() {
        return this.props.egoItems.map((item, i)=> {
            return <div key={"EgoItem"+i} className="EgoItem">
                <img src={item.imgSrc}/>
                <div>{item.title}</div>
            </div>
        });
    }

    //渲染完成后添加异步加载
    componentDidMount() {
        var lazyLoad = new LazyLoad('/build', 'hkfsMap.bundle.js');
        lazyLoad.addLazy();
    }

    //渲染团队成员
    renderTeam() {
        return this.props.teamItems.map((item, i)=> {
            return <HkfsStaffItem key={"HkfsStaffItem"+i} reImgSrc={item.reImgSrc} name={item.name}
                                  content={item.content}
                                  backContent={item.backContent}></HkfsStaffItem>
        });
    }

    //渲染招聘职位
    renderPosition() {
        return this.props.positionItems.map((item, i)=> {
            return <ReBubbleBox key={"positionItem"+i} reClass="WantBubble" reTitle={item.name} topPosition="3%"
                                isDanger={true}>
                {item.content}
            </ReBubbleBox>
        });
    }

    //定位到职位
    getStaff() {
        window.location.href = '#HkfsAboutUs';
    }

    //tab点击回调
    tabActiveCallBack(activeNum) {
    }

    //渲染新闻
    renderNewsList() {
        return <ReLiGroup reClass="HkfsAboutNews" reData={this.props.newsDetail.content}></ReLiGroup>;
    }

    render() {
        let aboutMessage1 = "华康财富（华康海宇财富管理有限公司）成立于2013年5月，注册资金5亿。目前已在上海、重庆、广州三地开设了财富直销分公司，且在河北、北京、山东、上海、浙江、广东、重庆、四川、湖南、湖北、江苏、安徽、福建、辽宁等区域中心城市开设了财富中心。";
        let aboutMessage2 = "华康财富致力于提供客户专业、稳健、持续的投资理财服务，定位于做中高端人群的保险理财专家。国际化与专业化是华康财富的两大特点，越来越多的客户就如何利用资本增长向华康财富寻求建议和意见。";
        let aboutMessage3 = "目前华康财富与包括美国JP-Morgan在内的私人银行体系建立合作，运用大数据形成与属于中国市场的资产配置模型。专业水平已超越国内大多数的银行体系，直指国际私人银行的专业水平。2015年华康财富的销售规模8亿元，2016年有望实现各类金融产品销售规模近30亿元。";
        let aboutMessage4 = "华康财富致力于成为中国政府、证监和保监机构在中国资本市场持续发展的长期合作伙伴。华康财富结合来自两岸三地的专业经营团队，将继续利用其全面的渠道资源和在其他市场的经验，帮助中国客户满足其不断变化的理财需求。";
        return <div className="HkfsAbout">
            <ReTab activeItem={this.getTabActive()} callParent={this.tabActiveCallBack} reClass="HkfsAboutTab" changeUrl={true}>
                <div reTabTitle="公司简介">
                    <div className="HkfsAboutCompanyBackGround">
                        <div className="HkfsAboutCompany">
                            <div className="HkfsAboutCompanyTitle"><img src="./images/pc/company_ego_wall_text.png"/>
                            </div>
                            <div className="HkfsAboutMessage">
                                <p>{aboutMessage1}</p>
                                <p>{aboutMessage2}</p>
                                <p>{aboutMessage3}</p>
                                <p>{aboutMessage4}</p>
                            </div>
                        </div>
                    </div>
                    <div className="HkfsAboutEgoBackGround">
                        <div className="HkfsAboutEgo">
                            <div className="EgoSlider">
                                <ReSlider heightAuto="25%" showCount={3} isShowPrevAndNext={true} isAutomatic={true}>
                                    {this.renderEgoItems()}
                                </ReSlider>
                            </div>
                            <div className="EgoImage">
                                <img src="./images/pc/company_Certificate_text.png"/>
                            </div>
                        </div>
                    </div>

                    <div className="HkfsAboutProcess">
                        <div className="HkfsAboutProcessTitle">华康发展历程</div>
                        <div className="HkfsAboutCenterCircle">
                            <div className="SmallCircle"></div>
                        </div>
                        <div className="HkfsAboutCenterLine"></div>
                        {this.renderHkfsProcess()}
                    </div>

                    <div id="HkfsMap" className="HkfsAboutMap">
                    </div>
                </div>
                <div reTabTitle="华康团队">
                    <div className="HkfsAboutTeam">
                        <div className="HkfsAboutTitle">
                            团队领袖
                        </div>
                        <HkfsLeaderContent reData={this.props.leaderItems}></HkfsLeaderContent>
                        <div className="HkfsAboutTitle">
                            优秀团队
                        </div>
                        <div className="HkfsAboutTeamMembers">
                            {this.renderTeam()}
                        </div>
                    </div>
                </div>
                <div reTabTitle="华康新闻">
                    <div className="NewsBack">
                        <div className="News">
                            <div className="HkfsAboutTitle">
                                华康新闻
                            </div>
                            <div className="NewsContent">
                                {this.renderNewsList()}
                            </div>
                            <div className="PagerDiv">

                                <Pager page={this.props.newsDetail.page} totalPage={this.props.newsDetail.totalPage}
                                       onChangePage={i=>this.props.dispatch(actions.getNewsByNumber(i,10))}/>
                            </div>
                        </div>
                    </div>
                </div>
                <div reTabTitle="招贤纳士">
                    <div className="HkfsAboutBanner">
                        <img className="HkfsAboutBannerImg" src="./images/pc/join_banner_bg.jpg"/>
                        <div className="HkfsAboutBannerContent">
                            <div className="BannerTitle">加入我们吧！</div>
                            <div>无论你是善于分析还是创意十足，精于技术还是擅长交际</div>
                            <div>华康财富都能为你提供一个挑战自我的理想机会</div>
                            <div>让我们在这里一起构筑未来，实现梦想！</div>
                            <div><ReButton reButtonClick={this.getStaff} reClass="HkfsAboutButton">查看职位</ReButton></div>
                        </div>
                    </div>
                    <div className="HkfsAboutUsBack">
                        <div className="HkfsAboutUs" id="HkfsAboutUs">
                            <div className="hkfsAboutImg"><img src="./images/pc/join_img_our_team.jpg"/></div>
                            <div className="hkfsAboutArticle">
                                <p className="hkfsAboutTitle">关于我们</p>
                                <p>
                                    华康财富由中国财富管理行业的资深人士组成，根据客户的风险偏好、财务状况、家庭结构等因素提供全方位的理财规划与财富管理服务，并同步开发各种符合市场需求的理财产品，包括但不限于固定收益类、地产基金类、股权类等产品，希望通过科学的资产配置帮助千千万万的客户实现安全稳健的财富增值。目前在上海、广州、北京、天津、深圳、杭州、重庆、成都等20多个中心城市开展理财服务。
                                </p>
                            </div>
                        </div>
                    </div>
                    <div className="HkfsAboutWant">
                        <ReLeftNavigationBar reClass="WantLeftNavigation">
                            {this.renderPosition()}
                        </ReLeftNavigationBar>
                    </div>
                </div>
                <div reTabTitle="联系我们">
                    <div className="CallUsBack">
                        <div className="CallUs">
                            <div className="HkfsAboutTitle">
                                联系我们
                            </div>
                            <div className="HkfsAboutOurAddress">
                                <img src="./images/pc/contact_img_map.jpg"/>
                            </div>
                            <div className="HkfsAboutCompanyName">华康海宇财富有限公司</div>
                            <div className="HkfsAboutCompanyOther">全国服务热线 <b>400-102-1010</b></div>
                            <div className="HkfsAboutCompanyOther">电子邮箱 <b>hkfs@hkfs.cn</b></div>
                            <div className="HkfsAboutCompanyOther">联系地址 <b>广州市天河区珠江新城87号高德置地春广场A座1504-05</b></div>
                        </div>
                    </div>
                </div>
            </ReTab>
        </div>
    }
}


function mapStateToProps(state) {
    // 一般一组状态都是为一个页面服务的，所以把它们一股脑的映射过来比较方便
    // 但是把映射一一写出来也有好处，就是很容易看到组件里有什么属性

    return Object.assign({}, state.about);
}

module.exports = ReactRedux.connect(mapStateToProps)(HkfsAbout);